<template>
  <input
    :type="type"
    v-model="inputValue"
    class="w-full h-40px py-3px px-5px box-border rounded"
    :placeholder="placeholder"
  />
</template>

<script setup lang="ts">
import { computed, toRefs } from "vue";

interface Props {
  value: string;
  placeholder?: string;
  type?: string;
}

const emits = defineEmits(["update:value"]);
const rawProps = withDefaults(defineProps<Props>(), {
  type: "text",
  placeholder: "请输入",
});
const { type, placeholder, value } = toRefs(rawProps);
const inputValue = computed({
  get: () => {
    return value.value;
  },
  set: (value) => {
    emits("update:value", value);
  },
});
</script>

<style scoped>
input {
  outline: none;
  border: 1px solid var(--gray);
}

input::placeholder {
  color: var(--gray);
}
</style>
